<!-- 登录界面的弹窗 -->
<template>
	<view class="bd1">

		<nonDevModeWarn v-if="xhrFailed"></nonDevModeWarn>

		<view class="bd"></view>

		<view class="mainCtn">
			<view class="mainCtnMsg">

				<view class="pic" @click="changePersonPic()">
					<image :src="imgUrlString" v-if="imgUrlString!==''" mode=""></image>
					<image v-else :src="imgUrlOrigin" mode=""></image>
				</view>

				<view class="grayLine"></view>

				<view class="nickname">
					<text class="nicknameText">昵称：</text>
					<input placeholder="请输入用户昵称" class="input" @input="checkInput" v-model="nickname" />
				</view>

				<view class="grayLine"></view>
			</view>

			<view class="mainCtnBtn">
				<view class="reject">
					拒绝
				</view>
				<view class="blank">

				</view>
				<view class="accept" @click="goToLodin()">
					<!-- TODO调用父组件的login函数 -->
					确认授权
				</view>
			</view>
		</view>

	</view>
</template>
<style scoped>
	.grayLine {
		height: 2rpx;
		width: 100%;
		background-color: rgb(242, 242, 242);
	}

	.blank {
		width: 30rpx;
	}

	.reject {
		flex: 1;
		border-radius: 24rpx;
		line-height: 100rpx;
		font-weight: bold;
		background-color: rgb(241, 241, 241);
	}

	.accept {
		flex: 1;
		border-radius: 24rpx;
		line-height: 100rpx;
		font-weight: bold;
		color: white;
		background-color: rgb(255, 97, 10);
	}

	.mainCtnBtn {
		margin: 30rpx 20rpx 20rpx;
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: space-around;

	}

	.mainCtnMsg {
		flex: 3;
		display: flex;
		flex-direction: column;
		padding-top: 16rpx;
	}

	.pic {
		margin: 16rpx auto;
	}

	.pic>image {
		display: block;
		width: 20vw;
		height: 20vw;
	}

	.nicknameText {
		margin-left: 20rpx;
	}

	.nickname {
		flex: 1;

		display: flex;
		justify-content: center;
		align-items: center;

	}

	.input {
		line-height: 60rpx;
	}

	.mainCtn {

		/* height: 400rpx; */
		width: 100%;

		display: flex;
		flex-direction: column;
		flex: 1;
		z-index: 3;
		background-color: white;
		border-radius: 40rpx 40rpx 0 0;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}

	.bd {
		flex: 2;
		width: 100%;
		/* background-color: rgb(231, 231, 231); */
		opacity: 40%;
	}

	.bd1 {
		z-index: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgba(0, 0, 0, 0.4);
	}
</style>
<script>
	import nonDevModeWarn from 'pages/models/nonDevModeWarn.vue'

	export default {
		components: {
			nonDevModeWarn,
		},

		mounted() {
			this.getRandomPic() //随机头像
			this.fetchNickname() //随机昵称
		},
		data() {
			return {
				imgUrlString: '', //头像url
				imgUrlOrigin: '', //原始的头像url

				nickname: '', //填写的用户昵称

				xhrFailed: false,
			}
		},
		methods: {

			//调用外部api，获取随机昵称start
			async fetchNickname() {
				var that = this
				await uni.request({
					url: 'https://api.lolimi.cn/API/naen/api.php',
					success(res) {
						console.log(res.data.data.name)
						that.nickname = res.data.data.name
					}
				})
			},
			//调用外部api，获取随机昵称end
			// 阻止不能input输入框为空
			checkInput(e) {
				if (e.target.value.trim() === '') {
					e.target.value = this.nickname;
					// 将输入框的值恢复为之前的值

				} else {
					this.nickname = e.target.value
				}
			},
			//登录函数
			goToLodin() {


				//如果没有自己设置头像，那么就是用 随机头像
				if (this.imgUrlString == '') {
					this.imgUrlString = this.imgUrlOrigin
				}

				if (this.nickname.trim() === '') {
					uni.showToast({
						title: '输入框不能为空',
						icon: 'none'
					})
				} else {

					//TODO应该要调用父组件的函数
					this.$emit('to-login', this.imgUrlString, this.nickname)
				}





			},
			// 生成随机头像函数
			async getRandomPic() {
				var that = this
				await uni.request({
					url: 'https://v2.api-m.com/api/head',
					success: (res) => {

						console.log(res.data);
						that.imgUrlOrigin = res.data.data

					},
					fail: () => {
						this.xhrFailed = true
					}
				})
			},



			// 更换头像函数start
			async changePersonPic() {
				var _that = this
				uni.chooseImage({
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						var that = this

						//上传一个图片，并返回地址
						await uni.uploadFile({
							url: _that.$baseUrl + '/common/upload',
							// url: '$baseUrl'+'/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',

							count: 1,
							//files:[tempFilePaths[0]],
							formData: {
								count: 1, // 设置 count 参数为 0,

							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								_that.imgUrl = uploadFileRes.data
								console.log(_that.imgUrl)


								_that.imgUrlString = _that.imgUrl.split('[')[1].split(']')[0]
									.replace(/"/g, '')
								console.log(_that.imgUrlString) //获取图片上传后的url
								_that.updateUserDTO.avatarurl = _that.imgUrlString
								_that.changeIndex = 1

								_that.updateUserDTO.avatarurl = _that.imgUrlString

							}
						});
					}
				});


			}
			// 更换头像函数start
		}
	}
</script>